/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">补偿均价</b>
    </p>
    <ul class="main">
      <li>
        <p class="num">{{Math.round(price.priceofavg)}}<b class="unit">元/㎡</b></p>
        <p class="text">补偿均价</p>
      </li>
      <li>
        <p class="num">{{Math.round(price.userofavg)}}<b class="unit">元/户</b></p>
        <p class="text">户均价</p>
      </li>
      <!-- <div class="item laowu">
        <i class="iconfont icon-geikehuqian"></i>
        <span class="name">补偿均价</span>
        <span class="num">{{Math.round(price.priceofavg)}}</span>
        <span class="unit">元/㎡</span>
      </div>
      <div class="item pinggu">
        <i class="iconfont icon-GEO-icon-"></i>
        <span class="name">户均价</span>
        <span class="num">{{Math.round(price.userofavg)}}</span>
        <span class="unit">元/户</span>
      </div> -->
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    price: Object
  },
  data() {
    return {};
  },
  mounted() {

  },
  methods: {

  },
  components: {}
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.main {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

li {
  flex: 1;
  display: inline-block;
  .num {
    font-size: 22px;
    color: @primary;
    .mix-flex-center();
    .unit {
      font-size: 12px;
      color: @font-regular;
    }
  }

  .text {
    font-size: 14px;
    .mix-flex-center();
  }
}

</style>
